<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Potree Viewer</title>

    <link rel="stylesheet" type="text/css" href="./libs/potree/potree.css">
    <link rel="stylesheet" type="text/css" href="./libs/jquery-ui/jquery-ui.min.css">
    <link rel="stylesheet" type="text/css" href="./libs/perfect-scrollbar/css/perfect-scrollbar.css">
    <link rel="stylesheet" type="text/css" href="./libs/openlayers3/ol.css">
    <link rel="stylesheet" type="text/css" href="./libs/spectrum/spectrum.css">
    <link rel="stylesheet" type="text/css" href="./libs/jstree/themes/mixed/style.css">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <script src="./libs/jquery/jquery-3.1.1.min.js"></script>
    <script src="./libs/spectrum/spectrum.js"></script>
    <script src="./libs/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
    <script src="./libs/jquery-ui/jquery-ui.min.js"></script>
    <script src="./libs/three.js/build/three.min.js"></script>
    <script src="./libs/other/BinaryHeap.js"></script>
    <script src="./libs/tween/tween.min.js"></script>
    <script src="./libs/d3/d3.js"></script>
    <script src="./libs/proj4/proj4.js"></script>
    <script src="./libs/openlayers3/ol.js"></script>
    <script src="./libs/i18next/i18next.js"></script>
    <script src="./libs/jstree/jstree.js"></script>
    <script src="./libs/potree/potree.js"></script>
    <script src="./libs/plasio/js/laslaz.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=GfIjvGE8EkCeW7PwkdjOC38hV7hn8nwg"></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=a2989b2bc788178770132e4b93e51fd9"></script>
    
    <!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
    <!-- INCLUDE SETTINGS HERE -->
    <div style="position: relative; width: 100%; height: 100%">

        <div id="map_container" style="width: 100%; height : 100%; position: absolute;z-index: 0"></div>
        <div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 1;background-color: rgba(0,0,0,0.5)">
            <div id="potree_render_area" ></div>

        </div>
        <div id="mymenu" style="position: absolute; top: 5%;left: 2%; z-index: 2;
        width : 20%; height: 100%; background:#fff;">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">图层</h3>
                </div>
                <div class="panel-body">
                    <div class="list-group">
                        <a href="#" class="list-group-item disactive">地图</a>
                        <a href="#" class="list-group-item active">点云模型</a>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">投影</h3>
                </div>
                <div class="panel-body">
                    <div class="btn-group-vertical" role="group">
                        <button type="button" class="btn btn-default" id="ortho_btn">正交投影</button>
                        <button type="button" class="btn btn-default" id="pespect_btn">透视投影</button>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">设置Potree数据路径</h3>
            </div>
            <div class="panel-body">
                <div class="input-group">
                    <input type="text" class="form-control" id="inputfile">
                </div>
                <button type="submit" class="btn btn-default" id="submitBtn">提交</button>
            </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">选点</h3>
                </div>
                <div class="panel-body" style="background-color: #4F4F4F;">
                    <li id="tools" style="list-style: none;"></li>
                </div>
            </div>

        </div>


    <script>


        $(".list-group-item").click(function () {
            if(this.classList[1] == "disactive"){
                this.classList.remove("disactive");
                this.classList.add("active");
            }
            else{
                this.classList.remove("active");
                this.classList.add("disactive");
            }

        });
        var inputpath = "./pointclouds/cloud.js";
        $("#submitBtn").click(function () {
            inputpath = $("#inputfile").val();
            console.log(inputpath);
            loadData();
        });
        $("#pespect_btn").click(function () {
            viewer.setCameraMode(Potree.CameraMode["PERSPECTIVE"]);
            $("#ortho_btn").classList.remove("active");
            console.log(viewer.camer)
        });
        $("#ortho_btn").click(function () {
            viewer.setCameraMode(Potree.CameraMode["ORTHOGRAPHIC"]);
            $("#pespect_btn").classList.remove("active");
        });
        //Gaode map
        var map = new AMap.Map('map_container', {
            pitch:75,
            viewMode:'3D',
            zoom: 17,
            expandZoomRange:true,
            zooms:[3,20],
            center:[116.333926,39.997245]
        });

        //relate Potree to the map
        var canvas = document.createElement('canvas');
        canvas.setAttribute("id","potree_canvas");

        console.log(Potree.Features);

        console.log(canvas);
        canvas.width = map.getSize().width;
        canvas.height = map.getSize().height;
        var cus = new AMap.CustomLayer(canvas, {
            opacit:50,
            zIndex: 12
        });
        cus.setMap(map);
        //Potree渲染区域初始化
        var viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
        
        viewer.setEDLEnabled(true);
        viewer.setFOV(60);
        viewer.setPointBudget(1*1000*1000);
        viewer.loadSettingsFromURL();
        // viewer.setPointSize(2)
        viewer.background = null;
        //绘制菜单栏中的选点，与Potree自带的选点功能（callback）相连
        let createToolIcon = function (icon, title, callback) {
            let element = $(`
            <img src="${icon}"
                style="width: 32px; height: 32px"
                class="button-icon"
                data-i18n="${title}" />
        `);

            element.click(callback);

            return element;
        };
        initMeasure();
        var measuringTool = new Potree.MeasuringTool(viewer);

        function initMeasure () {

            // POINT
            var elToolbar = $('#tools');
            elToolbar.append(createToolIcon(
                Potree.resourcePath + '/icons/point.svg',
                '[title]tt.point_measurement',
                function () {
                    $('#menu_measurements').next().slideDown();
                    var measurement = measuringTool.startInsertion({
                        showDistances: false,
                        showAngles: false,
                        showCoordinates: true,
                        showArea: false,
                        closed: true,
                        maxMarkers: 1,
                        name: 'Square'});

                }
            ));

        }
        //加载点云数据
        loadData();
        function loadData() {
            Potree.loadPointCloud(inputpath, "dotcloud", function(e){
                viewer.scene.addPointCloud(e.pointcloud);
                var material = e.pointcloud.material;
                material.size = 1;
                material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
                viewer.fitToScreen();
            });
            //Potree.setProjection()
        }

        /*var canvasLayer = new AMap.CanvasLayer({
            canvas: document.getElementById('potree_canvas'),
            zIndex: 1,
            opacity: 1
        })*/
        //canvasLayer.setMap(map);

    </script>
    
    
  </body>
</html>